<template>
  <transition name="modal-slide">
    <div class="widget-page-container" v-show="showWidgetPage">
      <div class="widget-page-box">
        <div class="widget-page-box-left">
          <el-input
            placeholder="搜索设备"
            prefix-icon="el-icon-search"
            size="small"
            v-model="searchContext"
            class="mar-btm-20 widget-page-box-left-search"
          >
          </el-input>
          <el-scrollbar class="widget-page-box-left-scroll" wrap-style="overflow-x:hidden;"
                        v-if="filterDeviceList.length>0">
            <div class="widget-device" :class="[activeDevice===index?'bgAntiColor' : '']"
                 v-for="(item,index) in  filterDeviceList" @click="changeDevice(index,item)" :key="index">
              <i class="el-icon-receiving"></i> {{item.deviceOtherName?item.deviceOtherName:item.deviceName}}
            </div>
          </el-scrollbar>
          <EmptyContent slot="empty" style="max-height: 250px" v-else></EmptyContent>
        </div>
        <div class="widget-page-box-right" v-loading="loading">
          <el-scrollbar class="height-100" wrap-style="overflow-x:hidden;">
            <div v-if="['room','other'].includes(currentWidgetType)">
              <p v-if=" componentList.length>0" class="widget-page-box-right-tag">
                {{currentWidgetType === 'room' ? '房间小组件' : '其他小组件'}}</p>
              <div class="widget-page-box" v-if=" componentList.length>0">
                <div v-for="(item,index) in componentList.filter(item=>item.type==='compositeWidget')" :key="index" :draggable="true"
                     @dragstart="dragStart"
                     @drag="(event) => drag(event, item)"
                     @dragend="dragEnd"
                     class="widget-picker-content">
                  <div class="widget-page-box-right-img">
                    <el-image :src="previewImage(item)" :style="previewImageStyle(item)" fit="contain"></el-image>
                  </div>
                  <span class="font-weight-bold font-size-16">{{item.name}}</span>
                </div>
              </div>
              <EmptyContent slot="empty" v-else></EmptyContent>
            </div>
            <div v-else class="width-100 height-100">
              <div
                v-if=" componentList.protocol&&componentList.protocol.length>0 ||  componentList.common&&componentList.common.length>0">
                <p v-if=" componentList.protocol.length>0" class="widget-page-box-right-tag">
                  协议</p>
                <div class="widget-page-box" v-if="componentList.protocol.length>0">
                  <div v-for="(item,index) in componentList.protocol.filter(item=>item.type==='compositeWidget')" :key="index" :draggable="true"
                       @dragstart="dragStart"
                       @drag="(event) => drag(event, item)"
                       @dragend="dragEnd"
                       class="widget-picker-content">
                    <div class="widget-page-box-right-img">
                      <el-image :src="previewImage(item)" :style="previewImageStyle(item)" fit="contain"></el-image>
                    </div>
                    <span class="font-weight-bold font-size-16">{{item.name}}</span>
                  </div>
                </div>
                <div class="divider" v-if="componentList.protocol.length>0"></div>
                <p v-if=" componentList.common.length>0" class="widget-page-box-right-tag">
                  设备</p>
                <div class="widget-page-box" v-if=" componentList.common.length>0">
                  <div v-for="(item, index) in componentList.common.filter(item=>item.type==='compositeWidget')" :key="index" :draggable="true"
                       @dragstart="dragStart"
                       @drag="(event) => drag(event, item)"
                       @dragend="dragEnd"
                       class="widget-picker-content">
                    <div class="widget-page-box-right-img">
                      <el-image :src="previewImage(item)" :style="previewImageStyle(item)" fit="contain"></el-image>
                    </div>
                    <span class="font-weight-bold font-size-16">{{item.name}}</span>
                  </div>
                </div>
              </div>
              <EmptyContent slot="empty" v-else></EmptyContent>
            </div>
          </el-scrollbar>

        </div>
      </div>
      <div class="widget-page-footer">
        <span>拖移小组件放到工程上</span>
        <el-button type="primary" size="small" @click="finish">完成</el-button>
      </div>
    </div>
  </transition>
</template>

<script>
  import {mapActions, mapState} from "vuex";
  import API from "@/api";
  import DeviceWidget from "@/components/IDE/widget/atom/DeviceWidget.vue";
  import {assetBaseUrl} from "@/config/env";

  export default {
    name: 'WidgetSelectPage',
    components: {DeviceWidget},
    data() {
      return {
        searchContext: '',
        activeDevice: 0,
        componentList: {},
        currentWidgetType: 'room',
        loading: false,
      };
    },
    computed: {
      ...mapState({
        globalDeviceList: state => state.ide.globalDeviceList,
        showWidgetPage: state => state.ide.showWidgetPage
      }),
      //搜索
      filterDeviceList() {
        const room = {widgetType: 'room', deviceName: '房间小组件'}
        const other = {widgetType: 'other', deviceName: '其他小组件'}
        const list = this.globalDeviceList.map(item => ({
          ...item,
          widgetType: 'device'
        }))
        list.unshift(room);
        list.push(other)
        // 如果搜索关键字为空，则返回所有项目
        if (!this.searchContext) {
          return list;
        }
        // 使用过滤函数筛选匹配的项目
        return list.filter(item =>
          item.deviceName.toLowerCase().includes(this.searchContext.toLowerCase())
        );
      },
      //展示预览图
      previewImage() {
        return (component = {}) => {
          const {previewImages = []} = component;
          if (previewImages.length) {
            const image = previewImages[0];
            const {filePath = ''} = image;
            return `${assetBaseUrl}/file/download/${filePath}`;
          }
          return false;
        };
      },
      previewImageStyle() {
        return (component = {}) => {
          const {widgetSize = {}} = component;
          return {
            'width': `${widgetSize.columns}00px`,
            'height': `${widgetSize.rows}00px`,
          }
        };
      },
    },
    mounted() {
      this.getData({widgetType: 'room', deviceType: null, protocolId: null})
    },
    methods: {
      ...mapActions([
        'updateShowWidgetPage',
        'updateDraggingDeviceWidget'
      ]),
      getData(params) {
        this.loading = true
        API.component.componentWidgetList(params).then(result => {
          const {data = []} = result;
          this.componentList = data
           this.loading = false
        }).catch(err => {
          console.log('err', err)
          this.loading = false
        });
      },
      changeDevice(idx, item) {
        this.activeDevice = idx
        this.currentWidgetType = item.widgetType
        this.getData({widgetType: item.widgetType, deviceType: item.deviceTypeId, protocolId: item.protocolId})
      },
      dragStart() {
        this.updateShowWidgetPage(false);
      },
      drag(event, widget) {
        const {clientX, clientY} = event;
        this.updateDraggingDeviceWidget({...widget, clientX, clientY});
      },
      dragEnd() {
        this.updateDraggingDeviceWidget(undefined);
        this.updateShowWidgetPage(false);
      },
      finish() {
        this.updateShowWidgetPage(false);
      }
    }
  };
</script>

<style scoped lang="less">
  .widget-page-container {
    width: 54%;
    height: 552px;
    border: 1px solid #d6d6d6;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    background: rgba(235, 235, 235, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 10px 10px 0 0;

    .widget-page-box {
      width: 100%;
      height: calc(100% - 50px);
      display: flex;

      .widget-page-box-left {
        width: 280px;
        height: 100%;
        padding: 20px 10px 10px 20px;
        box-sizing: border-box;
        border-right: 1px solid #d6d6d6;

        .widget-page-box-left-scroll {
          height: calc(100% - 75px);
        }

        .widget-device {
          font-size: 16px;
          color: #1A1A1A;
          border-radius: 10px;
          width: 100%;
          height: 40px;
          line-height: 40px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;
          cursor: pointer;
          padding-left: 10px;
        }

        .widget-page-box-left-search {
          /deep/ .el-input__inner {
            background: #ececed;
          }
        }

        .bgAntiColor {
          background: #e7e4e4;
        }
      }

      .widget-page-box-right {
        width: calc(100% - 240px);
        height: 100%;
        //overflow: auto;
        //justify-content: space-around;
        .widget-page-box {
          display: flex;
          flex-wrap: wrap;
          gap: 3px;
          align-items: center;
          width: 100%;
          height: auto;
	        padding: 0 10px 30px 10px;
        }

        .widget-picker-content {
          flex-basis: 33%; /* 设置项目的初始宽度为30% */
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          margin-bottom: 30px;

          .widget-page-box-right-img {
            min-height: 200px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            cursor: pointer;
          }
        }

        .widget-page-box-right-tag {
          font-size: 12px;
          color: #8c939d;
          padding-left: 20px;
        }

        /deep/ .el-loading-mask {
          background: rgba(235, 235, 235, 0.6);
        }
      }
    }

    .widget-page-footer {
      width: 100%;
      height: 50px;
      border-top: 1px solid #d6d6d6;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
    }
  }

  .modal-slide-enter-active,
  .modal-slide-leave-active {
    transition: transform 0.3s ease-out;
  }

  .modal-slide-enter,
  .modal-slide-leave-to {
    transform: translateX(-50%) translateY(100%);
  }

  .divider {
    height: 1px;
    background: #eee;
    margin: 10px 0;
    padding: 0 10px;
  }

</style>
